<template>
  <div class="modal">
    <el-dialog
      v-model="dialogVisible"
      :title="
        isNewRef ? modelConfig.header.newTitle : modelConfig.header.editTitle
      "
      width="50%"
      center
    >
      <div class="form">
        <el-form size="large" :model="formData" label-width="100px">
          <template v-for="item in modelConfig.formItems" :key="item.prop">
            <el-form-item :label="item.label" :prop="item.prop">
              <template v-if="item.type === 'input'">
                <el-input
                  v-model="formData[item.prop]"
                  :placeholder="item.placeholder"
                >
                </el-input>
              </template>
              <template v-if="item.type === 'date-picker'">
                <el-date-picker
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  v-model="formData[item.prop]"
                />
              </template>
              <template v-if="item.type === 'select'">
                <el-select
                  style="width: 100%"
                  :placeholder="item.placeholder"
                  v-model="formData[item.prop]"
                >
                  <template v-for="option in item.options" :key="option.value">
                    <el-option
                      :label="option.label"
                      :value="option.value"
                    ></el-option>
                  </template>
                </el-select>
              </template>
              <template v-if="item.type === 'custom'">
                <slot :name="item.slotName"> </slot>
              </template>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="btnOk">确定</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import useSystemStore from '@/store/main/system/system'
import { reactive, ref } from 'vue'

// 0 定义props
interface IProps {
  modelConfig: {
    header: {
      newTitle: string
      editTitle: string
    }
    formItems: any[]
    pageName: string
  }
  otherInfo?: any
}
const props = defineProps<IProps>()

const dialogVisible = ref(false)
// 定义form数据初始化
const initialForm: any = {}

for (const item of props.modelConfig.formItems) {
  initialForm[item.prop] = item.initialVlaue ?? ''
}
// 表单数据
const formData = reactive<any>(initialForm)
// 是否显示密码框 新建的时候显示
let isNewRef = ref(true)
let editData = ref()

// 修改显示的方法
function setDialogVisible(isNew: boolean, itemData?: any) {
  isNewRef.value = isNew
  dialogVisible.value = true
  //是编辑   新建和编辑使用同一个对话框，所以要做区分
  if (!isNew && itemData) {
    // 编辑
    // formData = itemData
    for (const key in formData) {
      formData[key] = itemData[key]
    }
    editData.value = itemData
  } else {
    //新建 初始化数据都为空
    for (const key in formData) {
      // 视图一直出现才可以设置默认值
      const item = props.modelConfig.formItems.find((item) => item.prop === key)
      formData[key] = item ? item.initialVlaue : ''
    }
    editData.value = null
  }
}

// 确定
function btnOk() {
  let infoData = { ...formData }
  if (props.otherInfo) {
    infoData = { ...infoData, ...props.otherInfo }
  }
  if (isNewRef.value) {
    // 传递数据，创建用户。网络请求
    // console.log('新建用户')
    const systemStore = useSystemStore()
    // console.log(formData)

    systemStore.newPageDataAction(props.modelConfig.pageName, infoData)
    // 隐藏
    dialogVisible.value = false
  } else {
    // 编辑用户
    // console.log('编辑用户')
    const systemStore = useSystemStore()
    systemStore.editPageDataAction(
      props.modelConfig.pageName,
      editData.value.id,
      infoData
    )
    dialogVisible.value = false
  }
}
// 导出属性 点击新建用户 弹出对话框
// defineExpose({ dialogVisible })
// 暴露属性或者方法
defineExpose({ setDialogVisible })
</script>
<style lang="less" scoped>
.modal {
  color: red;
}
</style>
